<template>
<div class="tw-libinfolistbox">
  <ul v-if="infoList && infoList.length>0" class="tw-libinfolist">
    <li v-for="(info, idx) in infoList"
      :key="idx">
      <a class="tw-libinfolist-item"
        :href="`${info.href}${info.needAccreditCode?'?'+$twApp.user.accreditUrl:''}`"
        :style="{borderBottomColor: borderColor}"
        :target="openInNewWindow?'_target':'_self'"
        @click="handleClick(info, $event)"
        @mouseenter="handleMouseenter"
        @mouseleave="handleMouseleave">
        <div v-if="info.img" class="tw-libinfolist-img">
          <img :src="info.img" />
        </div>

        <div class="tw-libinfolist-body">
          <h3 class="tw-libinfolist-title">
            <span class="tw-libinfolist-title-text" :style="{color: tcolor}">{{info.title}}</span>
            <!-- <span class="tw-libinfolist-title-tags">
              <i class="tw-libinfolist-title-tag" :style="{color: tagColor, background: tagBgColor}" v-for="(tag, idx) in info.tags" :key="idx">{{tag}}</i>
            </span> -->
          </h3>
          <!-- <div class="tw-libinfolist-props" :style="{color: propColor}">{{info.props}}</div> -->
          <div class="tw-libinfolist-desc" :style="{color: descColor}">
            <!-- <img src="@assets/desc-icon.png" /> -->
            <span>{{info.desc}}</span>
          </div>
        </div>
      </a>
    </li>
  </ul>

  <tw-lib-nodata v-else />
</div>
</template>

<script>
import props from './props'
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'tw-lib-link',
  mixins: [nodata],

  props,

  methods: {
    handleMouseenter (evnet) {
      evnet.target.querySelector('.tw-libinfolist-title-text').style.color = this.titleHoverColor
    },

    handleMouseleave (event) {
      event.target.querySelector('.tw-libinfolist-title-text').style.color = this.titleColor
    },

    handleClick(info, event) {
      if (typeof this.clickFn === 'function') {
        event.preventDefault()
        this.clickFn(info)
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
